<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--
            <a href="" @click.prevent="flag=true">登录</a>
			<a href="" @click.prevent="flag=false">注册</a>
			
			
			<login v-if="flag"></login>
			<reg v-else="flag"></reg>
			
            -->
			<!--vue提供了component 来展示对应名称的组件-->
			<!--component 是一个占位符 is属性可以展示对应名称的组件-->
			<a href="" @click.prevent="comName='login'">登录</a>
			<a href="" @click.prevent="comName='reg'">注册</a>
			<component :is="comName"></component>
			
			
			 <!-- 总结:当前学习了几个 Vue 提供的标签了??? -->
    		 <!-- component组件占位符,  template在vue控制的盒子外层定义模板,  transition 想要展示动画的元素被包住,  transitionGroup 控制列表动画被包住  -->
		</div>
		<template id="login">
		    <h2>这是login组件</h2>
		
		</template>
		<template id="reg">
		    <h2>这是reg组件</h2>
		
		</template>
		<script>
			Vue.component('login',{
				template:'#login'
			})
			Vue.component('reg',{
				template:'#reg'
			})
			
			var app = new Vue({
				el:'#app',
				data:{
					//flag:true,
					comName:'login',
				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>